<style lang="scss">

</style>
<template>
  <div class="z-table">
<!--     {{state.data}}-->
    <el-table :row-key="rowKeyFun" ref="elTable" :data="state.data" v-bind="$attrs" >
      <template v-for="item in tbColumns"   :key="item.prop">
        <el-table-column
          v-bind="item "
        >
          <template #default="scope">
<!--            <slot :name="item.prop" v-bind="scope"></slot>-->
            <template v-if="item.render">
              <FreeRender :scope="scope" :render="item.render"></FreeRender>
            </template>
            <template v-else-if="item.INDEX">
              {{scope.$index + 1}}
            </template>
            <template v-else>
              {{scope.row[scope.column.property]}}
            </template>
          </template>
        </el-table-column>

<!--        <free-column-->
<!--            v-bind="$attrs" :column="item" />-->
      </template>
      <el-table-column v-if="showAcion" v-bind="actionProps" label="动作">
        <template v-slot:default="scope">
          <div class="table-actions-wrap">
            <el-button
                class="z-table__button"
                type="primary"
                size="small"
                v-bind="action.attrs"
                v-for="action in actions"
                @click="runAction(scope, action, 'click')">
              <div v-html="action.label"></div>
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <template v-if="pagination">
      <pagination v-if="data.length > 0" v-bind="$attrs" v-on="$listeners" />
    </template>
  </div>
</template>

<script>
import FreeColumn from './columu.vue'
import Pagination from '../Pagination/index.vue'
import FreeRender from "@/plugins/z-table/FreeTable/render.vue";
import Sortable from 'sortablejs'
import {defineComponent, getCurrentInstance, toRaw, watch} from "vue";

export default defineComponent({
  name: 'ZDragTable',
  components: {
    FreeRender,
    Pagination,
    FreeColumn
  },
  props: {
    value: Array,
    column: Array,
    actionProps: Object,
    actions: Array,
    columnsProps: Object,
    showAcion: {
      type: Boolean,
      default: true
    },
    pagination: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dragIns: null,

      cached: JSON.stringify(this.value),
      state: {
        data: toRaw(this.value)
      },
      locks: false,
    }
  },

  computed: {
    tbColumns() {
      const { column, columnsProps: props } = this

      return column.map(col => {
        const it = Object.assign({}, props, col)
        return it
      })
    }
  },

  watch:{
    value(v) {
      // console.log(v)
    }
  },

  methods: {
    concat(arr = []) {
      this.state.data = this.state.data.concat(arr)
      this.$nextTick(() => {
        this.onChange(
        )
      })
    },
    setVal(arr = []) {
      this.state.data = [].concat(arr)
      this.$nextTick(() => {
        this.onChange(
        )
      })
    },
    /**
     * @private
     * @param obj
     */
    append(obj) {
      this.state.data.push(obj)
      this.$nextTick(() => {
        this.onChange(
        )
      })
    },
    remove(row) {
      let index = this.state.data.findIndex( v => v.value === row.value)
      if (index > -1) {
        this.state.data.splice(index, 1)
        this.$nextTick(() => {
          this.onChange(

          )
        })
      }

    },
    rowKeyFun(row) {
      // console.log(row)
      return row.id
    },
    /**
     * 重新设置数据
     * @param newVal
     */
    resetHaHa(newVal = {}) {
      // this.cached = JSON.stringify(newVal)
      // this.state.data = newVal
      // this.$nextTick(() =>{
      //   this.resetDragAble()
      // })
    },
    onValueChange(newVal) {
      // console.log('onValueChange', newVal)
      this.resetHaHa(newVal)
      this.$nextTick(() =>{
        this.resetDragAble()
      })
    },
    runAction(scope, action, name) {
      if (action.on && action.on[name]) {
        action.on[name](scope)
      }
    },
    resetDragAble() {
      let self = this
      let body = this.$refs.elTable.$el.querySelector('.el-table__body tbody')
      this.dragIns = new Sortable(body, {
        handle: ".z-drag-table__handle",  // Drag handle selector within list items
        onEnd: function (/**Event*/e) {
          let data = self.state.data
          const { oldIndex, newIndex } = e
          // console.log('evt', oldIndex, newIndex)
          let oldItem = data[oldIndex]
          data.splice(oldIndex, 1)
          data.splice(newIndex, 0, oldItem)
          self.$nextTick(() => {
            self.onChange(

            )
          })
          // self.resetHaHa(dataClone)
        }
      })
    },
    onChange( ) {
      this.locks = true
      this.$emit('val-change',   toRaw(this.state.data))
      setTimeout(() => {
        this.locks = false
      }, 300)
    }
  },
  mounted() {
    // console.log(this.$refs.elTable.$el)
    this.resetDragAble()
  }
})
</script>
